<template>
    <div class="xl-table">
        <xlUntil text="政策图文解读管理" @addForm="addForm" :queryParam="queryParam" @delBatch="delBatch"
                 @searchKeyWord="searchKeyWord" :searchColumns="columns" :until-visible="false">
            <template #search>
                <a-cascader
                    v-model="queryParam.unscrambleTypes"
                    :options="unscrambleTypeData.typeData"
                    placeholder="请选择政策解读类型"
                    allowClear
                    style="margin-right: 16px;"
                />
                <a-select v-model="queryParam.policyAreaCode" placeholder="请选择区域" allowClear style="margin-right: 16px;width: 150px;">
                    <a-select-option :value="item.codeMasterValue" :key="index"
                                     v-for="(item,index) in $store.getters.dictionary['PUBLISH_AREA']">
                        {{item.codeMasterName}}
                    </a-select-option>
                </a-select>
            </template>
        </xlUntil>
        <div class="xl-table-content">
            <xlTable
                :columns="columns"
                :dataSource="data"
                rowKey="id"
                :pagination="pagination"
                :loading="loading"
                @change="handleTableChange"
                bordered
                :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}">
                >
                <template v-slot:action="scope">
                    <a @click="editForm(scope.record)">编辑</a>
                    <a-divider type="vertical"/>
                    <a-dropdown>
                        <a class="ant-dropdown-link">更多
                            <a-icon type="down"/>
                        </a>
                        <a-menu slot="overlay">
                            <a-menu-item>
                                <a :href="$portalUrl + '/policy/img/detail?code=' + scope.record.policyUnscrambleImageTextCode" target="_blank">预览</a>
                            </a-menu-item>
                            <a-menu-item @click="seeForm(scope.record)">
                                <a>查看</a>
                            </a-menu-item>
                            <a-menu-item>
                                <a-popconfirm title="确定删除吗?" @confirm="() => delForm(scope.record.id)">
                                    <a>删除</a>
                                </a-popconfirm>
                            </a-menu-item>
                        </a-menu>
                    </a-dropdown>
                </template>
            </xlTable>
        </div>
        <xlForm ref="xlForm" @handleOk="handleOk"></xlForm>
        <seeForm ref="seeForm"></seeForm>
    </div>
</template>

<script>

import xlMixin from '../../../components/mixin/index'
import {notUnscrambleImageTextGet, unscrambleImageTextDetailGet} from "@/assets/api/policy";

export default {
    name: "index",
    mixins: [xlMixin],
    data() {
        return {
            data: [],
            columns: [],
            policyTitleData: {
                title: '政策正文',
                dataIndex: 'policyOriginalTextId',
                type: 'select',
                tableVisible: true,
                required: false,
                typeData: []
            },
            unscrambleTypeData:  {
                title: '政策解读分类',
                dataIndex: 'unscrambleType',
                type: 'cascader',
                typeData: []
            },
            url: {
                list: "/system/api/policy/unscramble/image/text/page/list",
                add: '/system/api/policy/unscramble/image/text/save',
                edit: '/system/api/policy/unscramble/image/text/save',
                delete: "/system/api/policy/unscramble/image/text/_remove"
            }
        }
    },
    created() {
        this.columns = [
            {
                title: '序号',
                key: 'rowIndex',
                align: "center",
                fixed: 'left',
                width: '180px',
                sorter: (a) => a.id,//排序
                customRender: function (t, r, index) {
                    return parseInt(index) + 1;
                }
            },
            {
                title: '编号',
                dataIndex: 'policyUnscrambleImageTextCode',
                type: 'input',
                formVisible: true,
                seeVisible: true,
                tableVisible: true
            },
            this.policyTitleData,
            {
                title: '政策名称',
                dataIndex: 'policyTitle',
                formVisible: true
            },
            {
                title: '图文解读标题',
                dataIndex: 'policyImageTextSmallTitle',
                type: 'input'
            },
            {
                title: '标签',
                dataIndex: 'tagCodes',
                type: 'select.multiple',
                typeData: 'PUBLISH_TAG',
                tableVisible: true,
                required: false
            },
            {
                title: '领域',
                dataIndex: 'domainCodes',
                type: 'select.multiple',
                typeData: 'POLICY_RISING_DOMAIN',
                tableVisible: true,
                required: false
            },
            this.unscrambleTypeData,
            {
                title: '区域',
                dataIndex: 'policyAreaCode',
                type: 'select',
                tableVisible: true,
                typeData: 'PUBLISH_AREA'
            },
            {
                title: '状态',
                dataIndex: 'status',
                type: 'radio',
                formVisible: true,
                typeData: [
                    {
                        dataName: '待审核',
                        dataValue: 0
                    },
                    {
                        dataName: '审核通过',
                        dataValue: 1
                    },
                    {
                        dataName: '驳回',
                        dataValue: 99
                    }
                ]
            },
            {
                title: '发布人',
                dataIndex: 'createBy',
                type: 'input',
                formVisible: true
            },
            {
                title: '审核人',
                dataIndex: 'reviewer',
                type: 'input',
                formVisible: true
            },
            {
                title: '审核时间',
                dataIndex: 'auditTime',
                type: 'date',
                formVisible: true
            },
            {
                title: '发布时间',
                dataIndex: 'createDateTime',
                type: 'date',
                typeData: 'dateTime',
                formVisible: true
            },
            {
                title: '图文解读内容',
                dataIndex: 'policyImageTextSmallContent',
                type: 'editor',
                tableVisible: true,
                span: 2
            },
            {
                title: '宣传图片',
                dataIndex: 'policyImageTextImageUrl',
                type: 'upload',
                tableVisible: true,
                span: 2,
                required: false
            },
            {
                title: '操作',
                dataIndex: 'action',
                align: "center",
                fixed: 'right',
                width: '150px',
                scopedSlots: {customRender: 'action'},
            }
        ]
        this.unscrambleTypeData.typeData = this.getCascaderData({ dictionary: 'POLICY_UNSCRAMBLE_TYPE' })
        this.formatMerge()
        this.pageOnload()
    },
    methods: {
        seeForm(data) {
            unscrambleImageTextDetailGet({
                param: {policyUnscrambleImageTextCode: data.policyUnscrambleImageTextCode}
            }).then(res => {
                this.resetColumnsPolicyOriginalText({param: res.result.policyOriginalTextId})
                    .then(_ => {
                        this.$refs.seeForm.formatData(this.columns, res.result)
                        this.$refs.seeForm.visible = true
                    })

            })

        },
        addForm() {
            this.resetColumnsPolicyOriginalText()
                .then(result => {
                    this.$refs.xlForm.tableTitle = '新增'
                    this.$refs.xlForm.formatData(this.columns)
                    this.$refs.xlForm.visible = true
                    this.$refs.xlForm.confirmLoading = false
                    this.$refs.xlForm.formatForm({policyAreaCode: 'PA3'})
                    this.$refs.xlForm.type = 1
                })
        },
        editForm(data) {
            unscrambleImageTextDetailGet({
                param: {policyUnscrambleImageTextCode: data.policyUnscrambleImageTextCode}
            }).then(res => {
                this.resetColumnsPolicyOriginalText({param: res.result.policyOriginalTextId})
                    .then(_ => {
                        this.$refs.xlForm.tableTitle = '修改'
                        this.$refs.xlForm.formatData(this.columns)
                        this.$refs.xlForm.visible = true
                        this.$refs.xlForm.confirmLoading = false
                        this.$refs.xlForm.formatForm(res.result)
                        this.$refs.xlForm.type = 2
                    })
            })
        },
        resetColumnsPolicyOriginalText(params) {
            return notUnscrambleImageTextGet(params)
                .then(result => {
                    this.policyTitleData.typeData = result.result.map(r => {
                        return {
                            dataValue: r.id,
                            dataName: r.policyTitle
                        }
                    })
                })
        }
    }
}
</script>

<style scoped lang="less">
.xl-table {
    .xl-table-content {
        padding: 16px;
    }
}
</style>